<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=0">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="author" content="Web前端工程师谢意明">
    <title>谢之城</title>
    <link rel="stylesheet" href="css/idangerous.swiper.css"/>
    <link rel="stylesheet" href="css/animate.css">
    <link rel="stylesheet" href="css/css-reset.css"/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery-1.9.1.min.js"></script>
    <script src="js/idangerous.swiper.min.js"></script>
    <script src="js/basic.js"></script>


    <!--[if lt IE 9]><script src="js/html5.js" ></script><![endif]-->
    <!--[if lt IE 9]><script src="js/selectivizr-min.js" ></script><![endif]-->



</head>
<body>

<!--loading待做-->



<div class="index-content">
    <div class="index-bg"></div>
    <div class="index-dark"></div>
    <div class="index-logo">
        <img src="images/logo-white.png" alt="">
    </div>

    <div class="index-p">
        <div class="index-p-content">
            <div class="index-title">
                <h3>KASSXIE SPACE</h3>
            </div>
            <div class="index-link">
                <div class="index-link-box">
                    <div class="il-frame1"></div>
                    <div class="il-frame2"></div>
                    <a href="project.html">Project</a>
                </div>
                <div class="index-link-box">
                    <div class="il-frame1"></div>
                    <div class="il-frame2"></div>
                    <a href="about.html">About</a>
                </div>
                <div class="index-link-box">
                    <div class="il-frame1"></div>
                    <div class="il-frame2"></div>
                    <a href="javascript: alert('敬请期待');">Note</a>
                </div>
            </div>
        </div>
    </div>


</div>


<script>
    window.onload = function () {
        //垂直居中
        function lineHeightFix() {
            var h = $('.index-p').height() + 'px';
            $('.index-p').css('line-height',h);
        }
        lineHeightFix();
        $(window).resize(function () {
            lineHeightFix();
        });


        //首页动画
        $('.index-logo').addClass('on');
        $('.index-title').addClass('on');
        //循环依次添加动效
        var timeout = 300; //每隔多少ms
        var index = 0;
        var addClassAnimated;
        addClassAnimated = setInterval(function(){
            if(index >= $(".index-link .index-link-box").length){
                index = 0; //循环
                clearInterval(addClassAnimated);//清除循环
            }else {
                $('.index-link-box').eq(index++).addClass('on');
            }
        },timeout);


    }


</script>




</body>
</html>